<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>refs与事件处理</title>
</head>
<body>
<br>
  <div id="example"></div>

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    /*
    需求: 自定义组件, 功能说明如下:
      1. 点击按钮, 提示第一个输入框中的值
      2. 当第2个输入框失去焦点时, 提示这个输入框中的值
   */
    
    //1.定义组件
    class MyComponent extends React.Component {

      clickHandel = ()=> {
        // 输入函数体
        console.log(this);
        alert(this.refs.input1.value);
      }
      blurHandel = ()=> {
        alert(this.refs.input2.value);
        
      }

      render() {
        return (
          <div>
          <input type="text" ref = "input1"/>&nbsp;   
          <button onClick = {this.clickHandel} ref = "peiqi">点我提示数据</button> &nbsp;
          <input type="text" placeholder = "失去焦点提示" onBlur = {this.blurHandel} ref = "input2"/>
          </div>

        )  
      }
    }
    
    //2.渲染组件标签
    ReactDOM.render(<MyComponent/>,document.getElementById('example'))

  </script>
</body>
</html>
